<template>
  <h1>修改用户信息：</h1>
  <el-form :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item label="用户昵称：">
      <el-input v-model="form.nickname" />
    </el-form-item>
    <el-form-item label="邮箱：">
      <el-input v-model="form.email" />
    </el-form-item>
    <el-form-item label="电话号：">
      <el-input v-model="form.mobile" />
    </el-form-item>
  </el-form>
  <el-button type="primary" @click="submitForm">确定</el-button>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getUserInfoService, updateUserService } from "../../api/userAPI";

const form = ref({
  nickname: "",
  email: "",
  mobile: "",
});
// 获取用户信息
const getUserInfo = async () => {
  const res = await getUserInfoService();
  if (res.code === 200) {
    form.value.email = res.data.email;
    form.value.nickname = res.data.nickname;
    form.value.mobile = res.data.mobile;
  }
};

// 提交表单
const submitForm = async () => {
  await updateUserService(form.value);
  ElMessage.success("修改成功！");
};

// onMounted(() => {
//   getUserInfo();
// });
getUserInfo();
</script>

<style></style>
